<!DOCTYPE html	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:s="http://sduept.security.el/func"
	template="/template/template_dialog.xhtml">
	<ui:define name="head">
		<title></title>
		<style>
		.ui-datatable .ui-datatable-header {
		    border-bottom: 0 none;
		    position: fixed;
		    width:100%;
		    z-index:999;
		    margin-top:37px;
		}
		.ui-datatable-scrollable-header-box table{
			position:fixed;
			margin-top:66px;
			z-index:999;
			border-bottom:2px solid #999;
			
		}
		.ui-datatable .ui-datatable-scrollable-body {
		    min-height: 0;
		    margin-top:95px;
		}
		.ui-datatable th.ui-state-default, .ui-datatable tfoot td.ui-state-default {
		    background: #ddd;
		    border-color: #999;
		    border-bottom: 1px solid #999;
		    color:#222;
		    font-weight: bold;
		}
		</style>
		<link href='/resources/plugins/layer/skin/layer.css' rel='stylesheet' />
		
	</ui:define>
	<ui:define name="content">
		<h:form id="tableForm">
		  	<p:growl id="msgs" showDetail="true" />
		  	<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
				<p:commandButton value="是" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
				<p:commandButton value="否" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
			</p:confirmDialog>
			<p:toolbar id="toolbar" style="z-index: 999;position:fixed ! important;width:100%;">
				<f:facet name="left">					
					<p:commandButton value="添加问题设备" icon="fa fa-plus"
						onclick="PF('equipmentSelector').show()" />		
										
					<!-- <p:commandButton value="添加问题设备" onclick="openQuesDeviceDialog('#{questionEquipmentController.currentInspectionStation.stationId}');" icon="ui-icon-document" />
					<p:remoteCommand name="onQuesDeviceDialogReturn" update="tableForm:datb" actionListener="#{questionEquipmentController.onQuesDeviceDialogReturn}"/> -->
					
					<p:commandButton value="保存" 
						icon="fa fa-hdd-o" update="selectedDescJson saveConfirmDialog tableForm:msgs"
						actionListener="#{questionEquipmentController.save}" >
						<p:confirm header="提示" message="确定保存并关闭弹窗吗？" icon="ui-icon-alert"/>
					</p:commandButton>
					<h:inputHidden id="selectedDescJson" value="#{questionEquipmentController.descData}" />
				</f:facet>
			</p:toolbar>
			
			<p:dialog id="saveConfirmDialog" widgetVar="saveConfirmDialog" modal="true" header="提示" width="390"
				height="150" closable="true">
				<h:outputText value="#{questionEquipmentController.alertMsg}" /><br /><br />
				<p:commandButton value="确定" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" update="selectedDescJson tableForm:msgs"
					oncomplete="closeAndSave();" actionListener="#{questionEquipmentController.continueSave()}" />
				<p:commandButton value="取消" styleClass="ui-confirmdialog-no" icon="ui-icon-close"
					oncomplete="PF('saveConfirmDialog').hide()"/>
			</p:dialog>
			
			<!-- 问题设备 -->
			<p:dataTable id="datb" widgetVar="datb" var="item" style="text-align:center;" 
				rowIndexVar="ite" scrollable="true"
				value="#{questionEquipmentController.quesEquipments}" rowKey="#{item.id}" emptyMessage="无记录">

				<f:facet name="header">问题设备</f:facet>

				<p:column headerText="序号 " style="width:50px;">
					<h:outputText value="#{ite+1}" />
				</p:column>
				<p:column headerText="设备名称" style="width:10%">
					<h:outputText value="#{item.equipmentName}"	/>
				</p:column>
				<p:column headerText="问题数量" style="width:5%">
					<h:outputText value="#{item.questionAmount}" />
						<!-- <p:ajax event="change" listener="#{questionEquipmentController.onChange(item,item.questionAmount)}"   /> -->
				</p:column>
				<p:column headerText="扣分" style="width:5%">
					<h:outputText value="#{item.quesDeduct}" />
				</p:column>
				<p:column headerText="隐患描述" style="width:20%">
					<h:outputText style="width:99%;" value="#{item.hiddenDangerDesc}" />
				</p:column>
				<p:column headerText="风险等级" style="width:8%">
					<h:outputText value="#{item.riskLevel}" size="10"/>
				</p:column>
				<p:column headerText="整改建议" style="width:20%">
					<h:outputText style="width:99%;color:black;" value="#{item.recommendation}" />
				</p:column>

				<p:column headerText="操作" style="width:80px">
					<p:commandLink title="编辑" class="fa fa-pencil" actionListener="#{questionEquipmentController.preEdit(item)}"
						oncomplete="PF('editDialog').show()" style="margin-right:10px" update=":editForm:panel" />	
					<p:commandLink title="删除" update=":tableForm:datb :tableForm:msgs"
						class="fa fa-trash" actionListener="#{questionEquipmentController.delete(item)}" />
					<!-- <p:commandLink style="padding-left:15px" title="导入问题库" update=":tableForm:msgs"
						class="fa fa-share" actionListener="#{questionEquipmentController.addToProblemBase(item)}">
					</p:commandLink> -->
				</p:column>
				<p:column>
					<p:commandLink style="margin-left:10px;" value="上传图片"
						actionListener="#{questionEquipmentController.preUploadImage(item)}" oncomplete="PF('uploadImageDlg').show()" />
					<p:commandLink style="margin-left:10px;" value="上传视频"
						actionListener="#{questionEquipmentController.preUploadImage(item)}" oncomplete="PF('uploadVideoDlg').show()" />
				</p:column>
			</p:dataTable>
			<!-- 上传图片 -->
			<p:dialog header="上传图片" widgetVar="uploadImageDlg" modal="true" id="uploadImageDlg" width="700" height="300">
				<p:fileUpload id="picUpload" style="margin-top:10px" cancelLabel="取消" sizeLimit="1000000" fileLimit="1"
					mode="advanced" dragDropSupport="false" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
					oncomplete="PF('uploadImageDlg').hide()" update="picUpload :tableForm:msgs"
					fileUploadListener="#{questionEquipmentController.handleImageFileUpload}"
					uploadLabel="上传" label="图片" />
			</p:dialog>
			<!-- 上传视频 -->
			<p:dialog header="上传视频" widgetVar="uploadVideoDlg" modal="true" id="uploadVideoDlg" width="700" height="300">
				<p:fileUpload id="videoUpload" style="margin-top:10px" cancelLabel="取消" fileLimit="1"
					mode="advanced" dragDropSupport="false"
					oncomplete="PF('uploadVideoDlg').hide()" update="videoUpload :tableForm:msgs"
					fileUploadListener="#{questionEquipmentController.handleVideoFileUpload}"
					uploadLabel="上传" label="视频" />
			</p:dialog>
			<!-- 选择问题设备 -->
			<p:dialog header="设备选择器" id="equipmentSelector" widgetVar="equipmentSelector" modal="true" width="610px" height="432px" resizable="false">
				<p:layout fullPage="true">
					<p:layoutUnit position="center">
						<p:toolbar id="equipmentSelectorToolbar">
							<f:facet name="left">
								<p:autoComplete value="#{questionEquipmentController.equipmentQuery}" placeholder="请输入设备名称或按首字母查询" scrollHeight="200"
									completeMethod="#{questionEquipmentController.completeEquipmentNames}" inputStyle="width:215px"></p:autoComplete>
								<p:commandButton value="查询"  style="margin-left:5px;"
									actionListener="#{questionEquipmentController.reGenerateTree()}" update="tree" />
								<p:commandButton value="重置" style="margin-left:5px;"
									actionListener="#{questionEquipmentController.resetEquipmentQuery()}"
									update="tree equipmentSelectorToolbar" />
							</f:facet>
							<f:facet name="right">
								<p:commandButton value="确定" oncomplete="PF('equipmentSelector').hide()"
									disabled="#{questionEquipmentController.showChooseBtn()==false}"
									actionListener="#{questionEquipmentController.makeSureEquipmentByTree()}"
									update="tableForm:datb" />
							</f:facet>
						</p:toolbar>
						<p:tree value="#{questionEquipmentController.root}" var="node"
							style="border:none;font-size:16px;height:350px;overflow-y: scroll;width:100%" id="tree" widgetVar="tree" animate="true"
							selectionMode="checkbox" selection="#{questionEquipmentController.selectedNodes}">
							<p:ajax event="select" update="tableForm:equipmentSelectorToolbar" />
							<p:ajax event="unselect" update="tableForm:equipmentSelectorToolbar" />
							<p:treeNode type="1" icon="fa fa-folder-open-o">
								<h:outputText value="#{node}" />
							</p:treeNode>
							<p:treeNode type="Substation" icon="fa fa-home ">
								<h:outputText value="#{node}" />
							</p:treeNode>
							<p:treeNode type="Equipment" icon="fa fa-cc-amex">
								<h:outputText value="#{node.name}" />
							</p:treeNode>
						</p:tree>
					</p:layoutUnit>
					<!-- <p:layoutUnit position="east" header="自定义问题设备" size="40%">
						<h:panelGrid columns="2" cellpadding="5">
							<p:autoComplete id="cusQuesEquipment" value="#{questionEquipmentController.customQuesEquipmentName}" 
								completeMethod="#{questionEquipmentController.completeCustomEquipmentNames}" placeholder="请输入设备名称"
								style="margin-top:5px">
							</p:autoComplete>
							<p:commandButton value="确定" style="margin-left:5px;margin-top:5px"
								actionListener="#{questionEquipmentController.makeSureEquipmentByCustom()}"
								update="tableForm:datb" />
						</h:panelGrid>
					</p:layoutUnit> -->
				</p:layout>
				
			</p:dialog>
		</h:form>
		<!-- 编辑 -->
		<h:form id="editForm">
			<p:dialog id="editDialog" widgetVar="editDialog" header="编辑">
				<p:toolbar>
					<f:facet name="left">
						<p:commandButton value="确定" icon="fa fa-floppy-o" oncomplete="PF('editDialog').hide();"
							update=":tableForm:datb" actionListener="#{questionEquipmentController.saveEdit()}"/>
					</f:facet>
				</p:toolbar>
				<p:panelGrid id="panel">
					<p:row>
						<p:column>
							<p:outputLabel value="设备名称" />
						</p:column>
						<p:column>
							<h:outputText value="#{questionEquipmentController.selectedEquipment.equipmentName}" />
						</p:column>
						<p:column>
							<p:outputLabel value="风险等级" />
						</p:column>
						<p:column>
							<p:autoComplete value="#{questionEquipmentController.selectedEquipment.riskLevel}"
								completeMethod="#{hiddenDangerTrackController.completeHiddenGrade}" size="20"
								scrollHeight="400" dropdown="true" />
						</p:column>
					</p:row>
					<p:row>
						<p:column>
							<p:outputLabel value="问题数量" />
						</p:column>
						<p:column>
							<p:spinner value="#{questionEquipmentController.selectedEquipment.questionAmount}" min="1" size="20">
								<p:ajax event="change" listener="#{questionEquipmentController.onQuestionAmountChange()}" update="deductId" />
							</p:spinner>
						</p:column>
						<p:column>
							<p:outputLabel value="扣分" />
						</p:column>
						<p:column>
							<h:outputText id="deductId" value="#{questionEquipmentController.selectedEquipment.quesDeduct}" />
						</p:column>
					</p:row>
					<p:row>
						<p:column>
							<p:outputLabel value="隐患描述" />
						</p:column>
						<p:column colspan="3">
							<h:inputTextarea rows="3" style="width:99%;" value="#{questionEquipmentController.selectedEquipment.hiddenDangerDesc}" />
						</p:column>
					</p:row>
					<p:row>
						<p:column>
							<p:outputLabel value="整改建议" />
						</p:column>
						<p:column colspan="3">
							<h:inputTextarea rows="3" style="width:99%;" value="#{questionEquipmentController.selectedEquipment.recommendation}" />
						</p:column>
					</p:row>
				</p:panelGrid>
			</p:dialog>
		</h:form>
		<script>
		<!-- 问题选择器页面添加json数据    选择器的前端页面要有dialogReturn事件 -->
			var needQuesDialogIndex;
			var questionDialogSrc;
			var quesDeviceDialogIndex;
			var quesDeviceDialogSrc;
			function openQuestionDialog(id) {
				questionDialogSrc = '/ui/common/problembase_selector_single.xhtml?descId='+ id;
				needQuesDialogIndex = layer.open({
					type : 2,
					maxmin : false,
					area : [ '90%', '90%' ],
					fixed : false, //不固定
					title : '问题选择器',
					maxmin : true,
					content : questionDialogSrc
				});
			}
			/*子弹窗关闭执行函数*/
			function dialogReturn(index, data) {
				var params = [];
				data = eval("(" + data + ")");
				if (index == needQuesDialogIndex) {
					params.push({
						name : 'data',
						value : data.data
					}, {
						name : 'descId',
						value : data.descId
					});
					onQuestionDialogReturn(params);
				}else if(index ==quesDeviceDialogIndex){
					params.push({
						name : 'data',
						value : data.data
					}, {
						name : 'descId',
						value : data.descId
					});
					onQuesDeviceDialogReturn(params);
				}
			}
			/*关闭该弹窗并返回数据*/
			function closeAndSave() {
				var index = parent.layer.getFrameIndex(window.name);
				var data = document.getElementById("tableForm:selectedDescJson").value;
				if (parent.dialogReturn) {
					parent.dialogReturn(index, data);
				}
				parent.layer.close(index);
			}

			//打开设备选择器页面
			function openQuesDeviceDialog(stationId){				
				//var params = "chooseStation="+ false;
				var params = "stationId="+ stationId;
				quesDeviceDialogSrc = '/ui/common/equipment_selector_single_layer.xhtml?'+params;				
				quesDeviceDialogIndex = layer.open({
					  type: 2,
					  maxmin :false,
					  area: ['610px', '462px'],
					  fixed: false, //不固定
					  title:'设备选择器',
					  maxmin: true,
					  content: quesDeviceDialogSrc
					});
			}
		</script>
	</ui:define>
</ui:composition>